<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div class="add">
        <el-button
          v-if="MenuAuths('add')"
          class="settingBtn"
          type="primary"
          @click="addFn"
          plain
        >
          {{ translate('新增') }}
        </el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column :label="translate('序号')" type="index" width="80" />
        <el-table-column :label="translate('工作流名称')" prop="WorkFlowName" />
        <el-table-column :label="translate('工作流编码')" prop="Code" />
        <el-table-column
          :label="translate('描述')"
          prop="Descriptions"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('创建时间')"
          prop="CreateDate"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('最后修改时间')"
          prop="ModifyDate"
          show-overflow-tooltip
        />
        <el-table-column :label="translate('是否启用')">
          <template #default="{ row }">
            {{ row.Enabled === 0 ? translate('否') : translate('是') }}
          </template>
        </el-table-column>
        <el-table-column :label="translate('创建人')" prop="CreateUserName" />
        <el-table-column
          :label="translate('最后修改人')"
          prop="ModifyUserName"
        />
        <el-table-column :label="translate('操作')" width="300">
          <template #default="{ row }">
            <el-button plain size="small" type="primary" @click="isopenFn(row)">
              {{ row.Enabled == 1 ? translate('关闭') : translate('开启') }}
            </el-button>
            <el-button
              v-if="MenuAuths('edit')"
              plain
              size="small"
              type="primary"
              @click="updateil(row)"
            >
              {{ translate('编辑') }}
            </el-button>
            <el-button
              v-if="MenuAuths('edit')"
              plain
              size="small"
              type="primary"
              @click="editflow(row)"
            >
              {{ translate('编辑流程') }}
            </el-button>
            <el-button
              v-if="MenuAuths('delete')"
              plain
              size="small"
              type="danger"
              @click="deletedFn(row)"
            >
              {{ translate('删除') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogFormVisible" width="800px" @close="closeFn">
      <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
        <el-form-item :label="translate('工作流名称')" prop="workFlowName">
          <el-input v-model="form.workFlowName" />
        </el-form-item>
        <el-form-item :label="translate('流程编号')" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item :label="translate('描述')">
          <el-input v-model="form.descriptions" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeFn">{{ translate('取消') }}</el-button>
        <el-button type="primary" @click="save">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { getList, deleteList, addSaveList } from '@/api/form'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Flowpath',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogFormVisible: false,
        enabled: 0,
        MenuAuths: '',
        form: {
          workFlowName: '',
          WorkFlowID: '',
          code: '',
        },
        rules: {
          code: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入工号'),
            },
          ],
          Account: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入登录账号'),
            },
          ],
          workFlowName: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入账号名称'),
            },
          ],
        },
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: this.searchInfo,
          sort: '',
          order: '',
          wheres: `[{"name":"WorkFlowName","value":${this.searchInfo},"displayType":"like"}]`,
          export: true,
          value: this.searchInfo,
        }
        const data = await getList(params)
        this.tableData = data.data.rows
        console.log(this.tableData)
      },
      deletedFn(row) {
        this.$confirm(translate('确认删除吗?'), translate('提示'), {
          confirmButtonText: translate('确定'),
          cancelButtonText: translate('取消'),
          type: 'warning',
        })
          .then(() => {
            this.deleted(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: translate('已取消删除'),
            })
          })
      },
      async deleted(row) {
        const params = {
          wfid: row.WorkFlowID,
        }
        const data = await deleteList(params)
        if (data.code == '200') {
          await this.getList()
        }
      },
      // 编辑流程
      editflow(e) {
        this.$router.push({
          path: '/system/workflow',
          query: {
            id: e.WorkFlowID,
          },
        })
      },
      addFn() {
        this.enabled = 0
        this.form.descriptions = ''
        this.form.workFlowName = ''
        this.form.code = ''
        this.form.WorkFlowID = ''
        this.dialogFormVisible = true
      },
      save() {
        this.$refs['formRef'].validate(async (valid) => {
          if (valid) {
            this.addSaveList()
          }
        })
      },
      // 开启/关闭模板
      isopenFn(e) {
        this.enabled = e.Enabled == 0 ? 1 : 0
        this.form.descriptions = e.Descriptions
        this.form.workFlowName = e.WorkFlowName
        this.form.code = e.Code
        this.form.WorkFlowID = e.WorkFlowID
        this.addSaveList()
      },
      // 编辑
      updateil(e) {
        this.enabled = e.Enabled
        this.form.descriptions = e.Descriptions
        this.form.workFlowName = e.WorkFlowName
        this.form.code = e.Code
        this.form.WorkFlowID = e.WorkFlowID
        this.dialogFormVisible = true
      },
      closeFn() {
        this.enabled = 0
        this.form.descriptions = ''
        this.form.workFlowName = ''
        this.form.code = ''
        this.form.WorkFlowID = ''
        this.dialogFormVisible = false
      },
      async addSaveList() {
        const params = {
          code: this.form.code,
          flowData: '',
          enabled: this.enabled,
          descriptions: this.form.descriptions,
          workFlowName: this.form.workFlowName,
          WorkFlowID: this.form.WorkFlowID ? this.form.WorkFlowID : 0,
        }
        const data = await addSaveList(params)
        if (data.code == '200') {
          this.dialogFormVisible = false
          this.getList()
          this.$message({
            message: translate('保存成功'),
            type: 'success',
          })
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .add {
      margin-bottom: 10px;
      text-align: left;
    }
  }
</style>
